<template>
	<view class="form">
		<view class="list flex-r-b-c">
			<view class="text">头像</view>
			<view class="logo" style="color: #3DAD81;" @click="submit" >
				<image :src="image+form.face" mode=""></image>
			</view>
		</view>
		<view class="list flex-r-b-c">
			<view class="text">昵称</view>
			<input type="text" placeholder="请输入昵称" v-model="form.nickName">
		</view>
		<view class="list flex-r-b-c">
			<view class="text">手机号</view>
			<input type="tel" placeholder="请输入手机号" v-model="form.mobile">
		</view>
		<view class="list flex-r-b-c" style="justify-content: space-between;">
			<view class="text">会员等级</view>
			<input type="tel" placeholder='' v-model="form.memberLevelText" disabled="true">
			<!-- <view class="" style="display: flex;">
				<vvSelect :list="allList" label="name" valueKey="id"
					:valueIndex="valueIndex" placeholder="请选择会员等级" 
					ref="vvSelect" @change="openCup"></vvSelect>
				<image src="@/static/shop/c.png" mode=""></image>
			</view> -->
			
		</view>
		<!-- <view class="popupBtn" v-if="!isEdit" @tap.stop="getAccount">提交</view> -->
		<view class="popupBtn"  @tap.stop="editAccount">提交</view>
	</view>
</template>

<script>
	// import vvSelect from '@/pages/components/vv-select/vv-select.vue'
	import base from '@/api/base.js'
	export default {
		data() {
			return {
				image: this.$base.smallimgUrl,
				logo:'',
				form: {
					face:'',
					mobile:'',
					nickName:'',
					memberLevel:'',
					memberLevelText:'',
				},
				isEdit:false,
				allList:[
					{
						name:'Lv-1',
						id:1
					},
					{
						name:'Lv-2',
						id:2
					},
					{
						name:'Lv-3',
						id:3
					},
					{
						name:'Lv-4',
						id:4
					},
					{
						name:'Lv-5',
						id:5
					}
				]
			};
		},
		// components: {
		// 	vvSelect,
		// },
		onLoad(el) {
			this.accountCardInfo()
		},
		methods: {
			submit(){
				uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
					count: 1,//默认选择1张图片
					sizeType: ['original', 'compressed'],//original 原图，compressed 压缩图，默认二者都有
					success:  (res)=> {
						// console.log(res.tempFilePaths[0],'res.tempFilePaths[0]');//成功则返回图片的本地文件路径列表 tempFilePaths
						this.logo = res.tempFilePaths[0]//更新本低浏览头像图片
						this.uploadFilePromise(res.tempFilePaths[0]).then(res=>{
							console.log(res,'哈哈哈')
							this.form.face = res.showUrl
						})
						// console.log(a,)
					}
				});

			},
			uploadFilePromise(avatarUrl) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${base.imgUrl}/common/upload`, // 仅为示例，非真实的接口地址
						filePath: avatarUrl,
						name: 'file',
						formData: {
							user: 'test',
						},
						success: (res) => {
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).url,
									showUrl: JSON.parse(res.data).fileName,
								})
							}, 1000)	
						},
						fail(fails) {
							console.log(fails,'fail')
						}
					});
				})
			},
			// 查看绑卡信息
			accountCardInfo(){
				let that = this
				that.$api.getUserInfo().then(res=>{
					that.form = res.data.data
					that.form.memberLevelText = 'Lv-'+ res.data.data.memberLevel
					that.logo = that.image + res.data.data.face
					// console.log(res.data.data,'dddddddddd')
				})
			},
			// 编辑卡
			editAccount(){
				let that = this
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

				if (that.form.nickName == '') return that.$utils.toast('请输入昵称')
				if (that.form.mobile == '') return that.$utils.toast('手机号不能为空')
				if (!reg_tel.test(that.form.mobile)) return that.$utils.toast('请输入正确手机号')
				
				that.$api.memberEdit({
					nickName: that.form.nickName,
					face:that.form.face,
					mobile:that.form.mobile,
				}).then(res => {
					console.log(that.$base.smallimgUrl + that.form.face,'that.res.data')
					if(res.data.code == 200){
						that.$utils.toast('操作成功')
						setTimeout(() => {
							uni.navigateBack()
						},2000)
					}
				})
			},
			// 添加卡
			getAccount(){
				let that = this
				let reg_tel = /^([1-9]{1})(\d{14,19})$/
				if (that.form.nickName == '') return that.$utils.toast('请输入昵称')
				if (!reg_tel.test(that.form.mobile)) return that.$utils.toast('请输入正确手机号22')
				// if (that.form.bank_name == '') return that.$utils.toast('请输入银行名称')
				// if (that.form.bank_address == '') return that.$utils.toast('请输入开户行')
				
				that.$api.bindTxAccount({
					name: that.form.name,
					account:that.form.account,
					bank_name:that.form.bank_name,
					bank_address:that.form.bank_address,
				}).then(res => {
					if(res.data.msg == '设置成功'){
						that.$utils.toast(res.data.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						},2000)
					}
				})
			},
		}
	}
	
</script>

<style lang="less">	
	.vv-input__placeholder{
		color: #7F8084 !important;
	}
	
	.form {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
	
		.list {
			width: 100%;
			height: 110rpx;
			border-bottom: 1px solid #EFEFEF;
	
			.text {
				font-size: 28rpx;
				font-weight: 400;
				color: #000;
			}
	
			input {
				text-align: right;
			}
		
			
			image {
				width: 20rpx;
				height: 12rpx;
				margin: 14rpx;
			}
		}
	
		.default {
			margin-top: 40rpx;
			margin-left: 30rpx;
			font-size: 28rpx;
			color: #7F8084;
			font-weight: 400;
		}
	
		.popupBtn {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 96rpx;
			background-color: #000;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 200rpx;
		}
	
		.deleteBtn {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 96rpx;
			background-color: #DCDCDC;
			color: #7F8084;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}
		.logo{
			image {
				width: 100rpx !important;
				height: 100rpx !important;
				border-radius: 50%;
				margin-bottom: 10rpx;
			}
		}
	}
</style>